<template>
  <view class="container" style="padding-bottom: 90px;">
    <!-- 搜索栏 -->
    <!-- 		<view class="search-box">
			<view class="inp">
				<u-input v-model="searchParam.name" prefixIcon="search" placeholder="商品名称/编码/助记码" :clearable="true"
					border="none" :prefixIconStyle="prefixIconStyle" />
				<view class="btn">查询</view>
			</view>
		</view> -->
    <!--  tab 栏 -->
    <u-empty v-if="tabMenus == null || tabMenus.length == 0" />
    <view v-else>
      <view class="tabs">
        <u-tabs
          :list="tabMenus"
          lineColor="#F3C45D"
          lineWidth="30"
          :activeStyle="activeStyle"
          @click="onTabClick"
        ></u-tabs>
      </view>

      <u-empty v-if="leftMenus == null || leftMenus.length == 0" />
      <view v-else class="content">
         
    
      </view>
    </view>
    <uni-fab
      ref="fab"
      :pattern="pattern"
      :popMenu="false"
      horizontal="right"
      @fabClick="btnAddClick"
    />
  </view>
</template>

<script>
import { uNavigateTo, umodal, utoast } from "../../../utils/uniUtils.js";
export default {
  data() {
    return {
      searchParam: {
        name: "",
      },
      prefixIconStyle: {
        fontSize: "24px",
      },
      activeStyle: {
        color: "#F3C45D",
      },
      pattern: {
        buttonColor: "#F3C45D",
      },
      tabMenus: null,
      leftMenus: null,
      statusEnum: [
        //   售卖状态枚举
        { name: "在售", value: 1 },
        { name: "停售", value: 2 },
        { name: "定时起停售", value: 3 },
      ],
      warrantyTypeEnum: [
        // 保质期单位枚举
        { name: "天", value: 0 },
        { name: "年", value: 1 },
        { name: "月", value: 2 },
        { name: "小时", value: 3 },
        { name: "分钟", value: 4 },
      ],
      departmentList: [],
      currentCateIdx: 0, //左边默认分类
      details: {
        id: 468550149648453,
        corpId: 1001,
        storeId: 1005,
        feedTypeId: 468311223054405,
        name: "加牛肉一个",
        price: 0.0,
        purPrice: 0.0,
        departId: 1,
        helpCode: "4564566",
        pinYin: "34543",
        warrantyDate: 123,
        warrantyType: 0,
        code: "324235346",
        isPrint: true,
        changePrice: true,
        discounts: true,
        status: 3,
        image: "",
        isDelete: false,
        currencyFlag: 0,
        createTime: "2023-10-30 18:27:35",
        updateTime: "2024-01-11 17:17:01",
        modifyTime: 0,
        number: 0,
        foodCount: 2,
        isSelected: false,
        isExclusive: false,
      }, //   加料详情
      disabled: true, // 禁用
      lock: false, // 节流锁
    };
  },
  async mounted() {
    await this.GetFoodFeedCategory();
    await this.GetDepartment();
  },
  methods: {
    fabClick() {
        uNavigateTo("/pages/workbench/food/transfer");
    },
    bindPicker1Change(e) {
      // console.log("e-->", e);
      this.details.feedTypeId = this.tabMenus[e.detail.value].id;
    },
    bindPickerwarrantyTypeChange(e) {
      // console.log("e-->", e);
      this.details.warrantyType = this.warrantyTypeEnum[e.detail.value].value;
    },
    bindPickerstatusChange(e) {
      // console.log("e-->", e);
      this.details.status = this.statusEnum[e.detail.value].value;
    },

    bindPicker2Change(e) {
      // console.log("e-->", e);
      this.details.addPriceWay = this.addPriceWayList[e.detail.value].id;
    },
    /**
     *  上tab栏 点击事件
     */
    async onTabClick(e) {
      await this.GetFoodFeed(e.index);
      this.currentCateIdx = 0;
      this.disabled = true;
    },
    /**
     * 左tab栏点击事件
     */
    onLeftClick(idx) {
      this.currentCateIdx = idx;
      this.details = this.leftMenus[idx];
      this.disabled = true;
    },
    /**
     * 做法分组选择事件
     */
    feedCataChange(e) {
      console.log(e);
    },
    /**
     * 获取加料分类
     */
    async GetFoodFeedCategory() {
      let {
        data: { list },
      } = await this.$api.GetFoodFeedCategory({
        pageNum: 1,
        pageSize: 9999,
      });
      console.log("list-->", list);
      this.tabMenus = list;
      await this.GetFoodFeed();
    },
    /**
     * 获取做法
     */
    async GetFoodFeed(idx = 0) {
      if (this.tabMenus[idx] != null) {
        let {
          data: { list },
        } = await this.$api.GetFoodFeed({
          pageNum: 1,
          pageSize: 9999,
          feedTypeId: this.tabMenus[idx].id,
        });
        // console.log("GetFoodFeed-->", list);
        this.leftMenus = list;
        this.details = this.leftMenus[0] ?? null;
      }
    },
    
    async btnDel() {
      const res = await umodal();
      // 确定删除
      if (res) {
        await this.$api.DelFoodFeed(this.details);
        await this.GetFoodFeedCategory();
      }
    },
    /**
     * 添加按钮点击事件
     */
    async btnAddClick() {
      uni.navigateTo({
        url: "/pages/workbench/feed/doAdd",
      });
    },
    //编辑按钮点击事件
    async btnEditClick() {
      this.disabled = false;
    },
    
    async btnSaveClick() {
      await this.EditFoodFeed();
    },
    /**
     *  编辑数据
     */
    async EditFoodFeed() {
      if (this.details.name.trim().length == 0) {
        utoast("做法名称为空！", "error");
        return;
      }
      const res = await this.$api.EditFoodFeed(this.details);
      if (res.code == 0) {
        await this.GetFoodFeedCategory();
        this.disabled = true;
      }
    },
    async GetDepartment() {
      let {
        data: { list },
      } = await this.$api.GetDepartment({
        pageNum: 1,
        pageSize: 9999,
      });
      this.departmentList = list;
      this.details.departId = this.departmentList[0].id;
    },
    bindPickerDepartChange(e) {
      this.details.departId = this.departmentList[e.detail.value].id;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/pages/workbench/food/list.scss";

.container {
  .details {
    background-color: #fff;

    .form-item {
      display: flex;
      align-items: center;
      padding: 14rpx 0;

      .lbl {
        width: 80px;
        font-size: 14px;
      }

      .form-item-right {
        flex: 1;
      }
    }
  }

  .btn-group {
    display: flex;
    justify-content: space-around;
    padding-top: 22rpx;
  }
}
</style>
